<template>
  <el-container >
    <el-aside :width="isCollapseFlag ? '61px' : '230px'" :class="isCollapseFlag? '':'pd-5'" class="bg-58 boxS-i-4">
      <Aside  :isCollapse="isCollapseFlag" @getCollapseFlag="getCollapseFlag"/>
      <div class="fontW-7 font-16 color-f  font-f-ib mgtb-20">{{$t('shekvesOff.nft_set')}}</div>
      <div class="fontW-7 font-16 color-f font-f-ib ">
        {{$t('btn.search')}}<el-input v-model="menuInp" placeholder=""></el-input>
      </div>
      <div class="flex_w_start">
        <el-checkbox></el-checkbox>
        <img src="../../assets/img/tx4.svg" alt="" style="width:10%;margin:3%">
        <p class="fontW-7 font-16 color-f font-f-ib">Punk boy</p>
      </div>
    </el-aside>
    <el-main>
      <div class="mgb-20">
        <p class="fontW-7 font-20 theme-color font-f-ib">{{$t('shekvesOff.into_worls')}}</p>
        <p class="fontW-7 font-14 color-f font-f-ib">{{$t('shekvesOff.text')}}</p>
      <el-checkbox v-model="checkedAll" class="fontW-7 font-20 theme-color font-f-ib" @change="changeAll">{{$t('shekvesOff.Selectall')}}</el-checkbox>
      </div>
      <shekves-offer :shelvesData="shelvesData" :checkedAll="checkedAll"/>
    </el-main>
  </el-container>
</template>
<script>
import Aside from '../component/Aside.vue'
import ShekvesOffer from '../component/ShekvesOffer'
const shelvesData = [
  {
    id: 0,
    authName: 'Punk boy',
    authNameId: '4726',
    img_url: require('../../assets/img/tx4.svg'),
    floorPrice: 0.2,
    to: 'ImeetNFT',
    from: 'Opensea',
    collection: '',
    ischecked: false
  },
  {
    id: 1,
    authName: 'Punk boy',
    authNameId: '4726',
    img_url: require('../../assets/img/tx4.svg'),
    floorPrice: 0.2,
    to: 'ImeetNFT',
    from: 'Opensea',
    collection: '',
    ischecked: false
  },
  {
    id: 2,
    authName: 'Punk boy',
    authNameId: '4726',
    img_url: require('../../assets/img/tx4.svg'),
    floorPrice: 0.2,
    to: 'ImeetNFT',
    from: 'Opensea',
    collection: '',
    ischecked: false
  }
]
export default {
  components: {
    Aside,
    ShekvesOffer
  },
  data () {
    return {
      isCollapseFlag: false,
      shelvesData: shelvesData,
      menuInp: '',
      checkedAll: false
    }
  },
  methods: {
    getCollapseFlag: function (val) {
      this.isCollapseFlag = val
    },
    changeAll: function (val) {
      console.log(val)
      console.log(this.shelvesData, '333333')
      this.shelvesData.forEach(item => {
        item.ischecked = val
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
